<template>
	<view>
		<view class="" style="padding-bottom: 80px;background-color: #323232;">
			<image src="/static/detail.jpg" mode="widthFix"></image>
			<image v-if="form.dataSource == '兴荣'" src="/static/share.jpg" mode="widthFix"></image>
		</view>

		<view class="css-submit" @click="show = true">
			免费领取
		</view>
		<view class="css-back" @click="handleBack" v-if="form.dataSource == '基楚'">
			<image src="../../static/back.png" mode="aspectFit" style="width: 100%;height: 100%;"></image>
		</view>

		<!-- 免费领取弹窗 -->
		<u-popup :show="show" round="8px" mode="center" :closeable="true" :closeOnClickOverlay="false"
			@close="handleAllPopCloase">
			<view class="pop-box">
				<view style="text-align: center;font-size: 16px;font-weight: bold;margin-bottom: 10px;">
					下单办理
				</view>
				<u--form labelPosition="left" ref="uForm" labelWidth="80">
					<u-form-item label="入网姓名:" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="form.custName" border="surround" placeholder="请输入入网人姓名"></u--input>
					</u-form-item>
					<u-form-item label="身份证号:" prop="userInfo.name" borderBottom ref="item2">
						<u--input v-model="form.idNum" maxlength="18" type="idcard" border="surround"
							placeholder="请输入入网人身份证号码"></u--input>
					</u-form-item>
					<u-form-item label="收货人:" prop="userInfo.name" borderBottom ref="item3">
						<u--input v-model="form.recipientName" border="surround" placeholder="请输入收货人姓名"></u--input>
					</u-form-item>
					<u-form-item label="联系电话:" prop="userInfo.name" borderBottom ref="item3">
						<u--input v-model="form.phoneNum" maxlength="11" type="number" border="surround"
							placeholder="请输入收货联系电话"></u--input>
					</u-form-item>
					<u-form-item label="收货地:" prop="userInfo.name" borderBottom ref="item3" @click="cityChange">
						<u--input v-model="form.address" disabled disabledColor="#ffffff" placeholder="请选择收货地"
							border="surround" style="pointer-events: none;">
							<template slot="suffix">
								<u-icon slot="right" name="arrow-right"></u-icon>
							</template>
						</u--input>
					</u-form-item>
					<u-form-item label="详细地址:" prop="userInfo.name" borderBottom ref="item4">
						<u--input v-model="form.custAddress" border="surround" placeholder="请输入收货详细地址"></u--input>
					</u-form-item>
				</u--form>

				<view class="css-agreement">
					<view class="css-img" @click="isCkeck = !isCkeck">
						<image src="/static/check_n.png" mode="aspectFit" style="width: 100%;height: 100%;"
							v-if="isCkeck == false"></image>
						<image v-else src="/static/check_pre.png" mode="aspectFit" style="width: 100%;height: 100%;">
						</image>
					</view>
					<span class="css-text" style="margin-left: 25px;">
						我已阅读并同意
					</span>
					<span @click="handleAgreement(1)" class="css-text css-check" style="color: blue;">
						《合规使用手机卡告知书》
					</span>
					<span @click="handleAgreement(2)" class="css-text css-check" style="color: blue;">
						《客户入网服务协议及业务协议》
					</span>
					<span @click="handleAgreement(3)" class="css-text css-check" style="color: blue;">
						《关于客户个人信息收集、使用规则的公告》
					</span>
				</view>

				<view class="pop-btn" @click="clickSubmit">
					提交
				</view>
			</view>
		</u-popup>

		<u-popup :closeable="true" round="8px" :show="showAgreement" mode="center" @close="showAgreement = false">
			<view class="pop-agreement">
				<view class="title">
					{{ popTitle }}
				</view>
				<view class="content">
					{{ popContent }}
				</view>
			</view>
		</u-popup>

		<u-picker :show="showPicker" title="发货地" :columns="columns" @close="handlePickerClose"
			@cancel="handlePickerClose" :closeOnClickOverlay="true" @confirm="handlePickerConfirm"></u-picker>

		<u-toast ref="uToast"></u-toast>

		<pcaPicker ref="pcaPicker" @confirm="getPCA"></pcaPicker>

		<u-transition :show="isShowSuccess" mode="zoom-in" :custom-style="style">
			<view class="css-transition">
				<image src="../../static/success.gif" mode="aspectFit"
					style="width: 180px;height: 180px;background-color: white;">
				</image>
				<view>
					提交成功
				</view>
			</view>
		</u-transition>

	</view>
</template>

<script>
	import {
		xinxi,
		ruwang,
		gaozhi
	} from "./new_file.js";

	export default {
		data() {
			return {
				isShowSuccess: false,
				style: {
					position: "fixed",
					top: `${uni.$u.sys().windowHeight / 2 - 110}px`,
					left: `${uni.$u.sys().windowWidth / 2 - 110}px`,
					width: "220px",
					height: "220px",
					borderRadius: "10px",
				},
				show: false,
				showPicker: false,
				isCkeck: true,
				showAgreement: false,
				form: {
					custName: "", // 入网姓名
					idNum: "", // 入网身份证号
					recipientName: "", // 收货人姓名
					phoneNum: "", // 收货人电话
					custAddress: "", // 收货人地址
					dataSource: "兴荣", // 基楚  兴荣
					// dataSource: "基楚", // 基楚  兴荣
					address: ""
				},
				popTitle: "",
				popContent: "",
				columns: [
					["禁发", "黑龙江", "辽宁", "北京", "云南", "新疆", "西藏"]
				],
				token: ''
			}
		},
		onLoad(options) {

			// let url_string = "http://82810099.com:18097/#/pages/cardDetail/cardDetail?A69651";
			const url_string = window.location.href
			var params = url_string.split('?')[1];
			if (!params) {
				uni.showModal({
					title: "提示",
					content: "链接已失效，请重新扫码！",
					showCancel: false
				})
				return;
			}
			var vars = params.split("=");
			console.log(vars[0]);

			const baseURL = getApp().globalData.baseURL; //  pro_gdapp_h5

			uni.request({
				url: baseURL + "/liantong/loginByCode",
				data: {
					'inviteCode': vars[0]
				},
				method: 'POST',
				success: (res) => {
					this.token = res.data.token;
				}
			})

		},
		methods: {
			cityChange(e) {
				this.$refs.pcaPicker.show();
			},
			getPCA(e) {
				this.form.address = e.province + e.city + e.country;
			},
			handlePickerConfirm(e) {
				console.log(e.value);
				this.form.address = e.value[0];
				this.handlePickerClose();
			},
			handlePickerClose() {
				this.showPicker = false;
			},
			handleAllPopCloase() {
				this.showAgreement = this.showPicker = this.show = false;
			},
			// 协议 勾选
			handleCheck() {
				this.isCkeck = !this.isCkeck;
			},
			// 回到首页
			handleBack() {
				uni.reLaunch({
					url: "/pages/home/home"
				})
			},
			// 提交
			clickSubmit() {
				if (this.isCkeck == false) {
					uni.showToast({
						title: "请阅读并同意相应协议!",
						icon: "none"
					})
					return;
				}
				if (this.form.custName.length <= 0) {
					uni.showToast({
						title: "请输入入网人姓名!",
						icon: "none"
					})
					return;
				}
				let rename = /^(?:[\u4e00-\u9fa5·]{2,16})$/;

				if (rename.test(this.form.custName) == false) {
					uni.showToast({
						title: "入网人姓名格式错误!",
						icon: "none"
					})
					return;
				}

				let req = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
				if (req.test(this.form.idNum) == false) {
					uni.showToast({
						title: "身份证号码错误!",
						icon: "none"
					})
					return;
				}
				if (this.form.recipientName.length <= 0) {
					uni.showToast({
						title: "请输入收货人姓名!",
						icon: "none"
					})
					return;
				}
				if (rename.test(this.form.recipientName) == false) {
					uni.showToast({
						title: "收货人姓名格式错误!",
						icon: "none"
					})
					return;
				}
				if (this.form.phoneNum.length <= 0) {
					uni.showToast({
						title: "请输入收货联系电话!",
						icon: "none"
					})
					return;
				}
				let res1 = /^(?:(?:\+|00)86)?1\d{10}$/;
				console.log(res1.test(this.form.phoneNum));
				if (res1.test(this.form.phoneNum) == false) {
					uni.showToast({
						title: "手机号格式错误!",
						icon: "none"
					})
					return;
				}
				if (this.form.address.length <= 0) {
					uni.showToast({
						title: "请选择收货地!",
						icon: "none"
					})
					return;
				}
				if (this.form.custAddress.length <= 0) {
					uni.showToast({
						title: "请输入收货详细地址!",
						icon: "none"
					})
					return;
				}
				let address = ["黑龙江", "辽宁", "北京", "云南", "新疆", "西藏"];
				for (var i = 0; i < address.length; i++) {
					if (this.form.custAddress.includes(address[i]) == true) {
						uni.showToast({
							title: "暂不支持此地区!",
							icon: "none"
						})
						return;
					}
				}

				const baseURL = getApp().globalData.baseURL; //  pro_gdapp_h5
				this.form.custAddress = this.form.address + this.form.custAddress;

				var header = {};
				header["Authorization"] = this.token;
				uni.request({
					url: baseURL + "/liantong/add",
					data: this.form,
					header: header,
					method: "POST",
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							this.form = {
								custName: "", // 入网姓名
								idNum: "", // 入网身份证号
								recipientName: "", // 收货人姓名
								phoneNum: "", // 收货人电话
								custAddress: "", // 收货人地址
								dataSource: "兴荣", // 基楚  兴荣
								// dataSource: "基楚", // 基楚  兴荣
								address: ""
							};

							this.isShowSuccess = true;
							setTimeout(() => {
								this.isShowSuccess = false;
							}, 2000);
						} else if (res.data.code == 401) {
							uni.removeStorageSync('token');
							uni.showToast({
								title: "登录超时，请重新登录!",
								icon: "none",
								success: () => {
									setTimeout(function() {
										uni.reLaunch({
											url: '/pages/login/login'
										})
									}, 800);
								}
							})
							return;
						} else {
							uni.showToast({
								title: res.data.msg || res.data.message,
								icon: "none"
							})
						}
						this.show = false;
					},
					fail: (err) => {
						console.warn(err);
					}
				})
			},
			handleAgreement(idx) {
				this.showAgreement = true;
				switch (idx) {
					case 1:
						this.popTitle = "合规使用手机卡告知书";
						this.popContent = gaozhi;
						break;
					case 2:
						this.popTitle = "中国电信用户入网协议";
						this.popContent = ruwang;
						break;
					case 3:
						this.popTitle = "关于客户个人信息收集、使用规则的公告";
						this.popContent = xinxi;
						break;
					default:
						break;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.css-transition {
		width: 220px;
		height: 320px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		color: #333;
		padding: 0px 20px 20px 20px;
		background-color: #fff;
		line-height: 30px;
		border-radius: 10px;
	}

	.pop-agreement {
		background-color: white;
		width: 340px;
		padding: 30px 20px;
		border-radius: 10px;
		overflow: hidden;

		.title {
			width: 100%;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			height: 40px;
			line-height: 40px;
			color: #333;
		}

		.content {
			font-size: 14px;
			line-height: 20px;
			color: #666;
			overflow: scroll;
			height: 400px;
			white-space: pre-wrap;
		}
	}

	.css-submit {
		position: fixed;
		bottom: 20px;
		width: 200px;
		height: 44px;
		line-height: 44px;
		background-color: #D72743;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		left: calc(50% - 100px);
		border-radius: 8px;
		color: white;
		animation-name: scaleAnimation; // 动画名
		animation-duration: 2s; // 动画时长
		animation-iteration-count: infinite; // 永久动画
		transition-timing-function: ease-in-out; // 动画过渡

	}

	@keyframes scaleAnimation {

		// 动画设置
		0% {
			transform: scale(1);
		}

		25% {
			transform: scale(1.08);
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.08);
		}
	}


	.css-back {
		position: fixed;
		top: 20px;
		right: 20px;
		width: 44px;
		height: 44px;
		border-radius: 22px;

		// padding: 5px;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;
		backdrop-filter: blur(2px);
		background-color: rgba(255, 255, 255, 0.112);
		box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
		border: 2px rgba(255, 255, 255, 0.4) solid;
		border-bottom: 2px rgba(40, 40, 40, 0.35) solid;
		border-right: 2px rgba(40, 40, 40, 0.35) solid;

	}

	.pop-box {
		background-color: white;
		width: 320px;
		height: 85vh;
		padding: 30px 20px;
		border-radius: 10px;
		overflow: scroll;

		.pop-btn {
			width: 200px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			margin-left: calc(50% - 100px);
			background-color: #D72743;
			color: white;
			font-size: 16px;
			font-weight: bold;
			border-radius: 20px;
			margin-top: 20px;
		}
	}

	.css-agreement {
		position: relative;
		line-height: 20px;
		width: 100%;
		padding: 0px;
		margin-top: 10px;
	}

	.css-img {
		position: absolute;
		height: 20px;
		width: 20px;
	}

	.css-check {
		color: rebeccapurple;
	}

	.css-text {
		font-size: 12px;
		color: #333;
		height: 20px;
		line-height: 20px;
	}
</style>